<template>
  <div class="allPage">
    <div class="inner">
      <div class="top"
        ><img :src="publicPath + 'logo.png'" /><div class="welcome">{{ guide('welcome') }}</div></div
      >
      <div class="title" v-show="titles[index - 2]">{{ guide('floor') }}{{ index - 1 }}/8{{ guide('step') }} : {{ titles[index - 2] }}!</div>
      <div class="component">
        <component :is="arr[index]">
          <div class="slot">
            <div class="btn"
              ><button @click="handleNext">{{ guide('start') }}</button></div
            >
            <div class="text">{{ guide('startText') }}</div>
          </div>
        </component>
        <!-- <button v-show="(index = 0)">我不需要</button> -->
      </div>
      <div class="bottom">
        <div class="twoButton">
          <button @click="handleBack" v-show="index > 1">{{ guide('preStep') }}</button>
          <button @click="handleNext" v-show="index < arr.length - 1 && index > 0">{{ guide('nextStep') }}</button>
          <button v-show="index === arr.length - 1" @click="$router.push({ path: 'dashboard/Analysis' })">{{ guide('finish') }}</button>
          <button v-show="index > 0 && index < arr.length - 1" @click="exitGuide">{{ guide('exitGuide') }}</button>
          <!-- <button v-show="index=arr.length" @click="$router.push({ path: 'dashboard/Analysis' })">退出向导</button> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import StartPage from './components/StartPage.vue';
  import Depart from '@/views/system/depart/index.vue';
  import AssetCategory from '@/views/asset/asset-category/AssetCategoryList.vue';
  import AssetPositionList from '@/views/asset/position/AssetPositionList.vue';
  import RfidReaderList from '@/views/device/rfid-reader/RfidReaderList.vue';
  import AntennaList from '@/views/device/antenna/AntennaList.vue';
  import TagManagementList from '@/views/device/tag-management/TagManagementList.vue';
  import BasicData from './components/BasicData.vue';
  import { router } from '@/router';
  import { Modal } from 'ant-design-vue';
  // import SelectLanguage from './components/SelectLanguage.vue';
  import { shallowRef } from 'vue';
  import user from '@/views/system/user/index.vue';
  import role from '@/views/system/role/index.vue';
  import { queryDepartTreeSync } from '@/views/system/depart/depart.api';
  import { list as roleList } from '@/views/system/role/role.api';
  import { list as userList } from '@/views/system/user/user.api';
  import { list as positionList } from '@/views/asset/position/AssetPosition.api';
  import { list as categoryList } from '@/views/asset/asset-category/AssetCategory.api';
  import { list as readerList } from '@/views/device/rfid-reader/RfidReader.api';
  import { list as antennaList } from '@/views/device/antenna/Antenna.api';
  import { list as tagList } from '@/views/device/tag-management/TagManagement.api';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t: guide } = useI18n('guidePage');
  const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
  function handleNext() {
    if (index.value < arr.length - 1) index.value++;
  }
  function handleBack() {
    if (index.value > 0) index.value--;
  }
  const index = shallowRef(0);
  const arr = [StartPage, BasicData, Depart, role, user, AssetPositionList, AssetCategory, RfidReaderList, AntennaList, TagManagementList];
  const titles = [
    guide('pre') + ' ' + guide('depart'),
    guide('pre') + ' ' + guide('role'),
    guide('pre') + ' ' + guide('staff'),
    guide('pre') + ' ' + guide('position'),
    guide('pre') + ' ' + guide('catergory'),
    guide('pre') + ' ' + guide('rfidReader'),
    guide('pre') + ' ' + guide('antenna'),
    guide('pre') + ' ' + guide('tag'),
  ];
  const info = [
    guide('depart'),
    guide('role'),
    guide('staff'),
    guide('position'),
    guide('catergory'),
    guide('rfidReader'),
    guide('antenna'),
    guide('tag'),
  ];
  function exitGuide() {
    Promise.all([queryDepartTreeSync(), roleList({}), userList({}), positionList({}), categoryList({}), readerList({}), antennaList({}), tagList({})])
      .then(([dep, ...other]) => {
        // 所有 Promise 都成功完成，以数组形式返回结果
        const arr = [{ records: dep, total: dep.length }, ...other];
        // console.log(dep, other, arr, '5555555555555555555555');
        const newArr: number[] = [];
        arr.map((item, index) => {
          if (item.total === 0) {
            newArr.push(index);
          }
          return newArr;
        });
        // console.log(newArr, '7777777777');
        const withoutArr: string[] = [];
        newArr.map((item) => {
          withoutArr.push(info[item]);
        });
        Modal.confirm({
          centered: true,
          title: guide('modalTitle'),
          content: newArr.length ? guide('preContent') + `${withoutArr}` + ' ' + guide('afterContent')! : guide('allFinish'),
          onOk() {
            // 用户点击确认按钮时的回调函数
            router.push('/dashboard/Analysis');
          },
          onCancel() {
            // 用户点击取消按钮时的回调函数
            console.log(index, '@@@');
          },
        });
      })
      .catch((error) => {
        // 如果任何一个 Promise 失败，则返回失败的原因
        console.error(error);
      });
  }
  const url = `url(${publicPath}startPage.png)`;
</script>
<style lang="less" scoped>
  .allPage {
    background: v-bind(url);
    background-size: cover;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #001529;
    justify-content: center;
    .top {
      // border-top-left-radius: 50px;
      // border-top-right-radius: 50px;
      width: 100%;
      height: 12%;
      background-color: #e6f7ff;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #1890ff;
      border: 1px solid #91d5ff;
      img {
        display: block;
        width: 50px;
        height: 50px;
        margin-right: 4px;
      }
      .welcome {
        font-size: 40px;
        color: #1890ff;
      }
      p {
        display: inline-block;
        height: 100px;
        font-size: 40px;
        display: inline-block;
        color: #fff;
        line-height: 100px;
      }
    }

    .inner {
      // border-radius: 50px;
      justify-content: center;
      height: 95%;
      width: 80%;
      background-color: #fff;
      margin: auto;
      position: relative;
      display: flex;
      flex-direction: column;
      font-weight: 520;
      .title {
        margin: auto;
        font-size: 20px;
        padding: 5px;
        color: #f70606;
        font-weight: 550;
      }
      .component {
        flex: 1;
        overflow-y: hidden;

        &:hover {
          overflow: overlay;
        }
        .slot {
          display: flex;
          flex-direction: column;

          .btn {
            display: flex;
            justify-content: center;
            button {
              cursor: pointer;
              margin: 30px;
              font-size: 2.8rem;
              height: 150px;
              width: 520px;
              border: 1px solid #1890ff;
              border-radius: 30px;
              background-color: #1890ff;
              color: #fff;
            }
          }
          .text {
            margin-top: 0.3px;
            text-align: center;
            color: #001529;
            font-size: large;
          }
          .skip {
            justify-content: center;
            button {
              // margin-top: 40%;
              // padding: auto;

              background-color: #1890ff;
              border: none;
              color: white;
              width: 150px;
              height: 46px;
            }
          }
        }
      }
    }

    .bottom {
      width: 100%;
      flex-shrink: 0;
      height: 100px;
      align-items: center;
      display: flex;
      flex-direction: row;
      position: relative;
      justify-content: space-between;

      .twoButton {
        padding-left: 75%;
        > * {
          margin: 2px;
          cursor: pointer;
          background-color: #1890ff;
          border: none;
          color: white;
          width: 81px;
          height: 32px;
        }
      }
    }
  }
</style>
